<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章查询</title>
    <style>
        #result td {
            text-align: center;
        }

        #has_but {
            color: coral;
        }
    </style>
</head>
<body>
<div id="result">
    <form id="search" action="/two/search/" method="post">
        {% csrf_token %}
        <input type="text" name='carno' value="{{ carinfo }}" size="30" placeholder="请输入车牌号或车主姓名">
        <input type="submit" value="查询">

    </form>
    <hr>
    {% if records %}
        <table>
            <tr>
                <th width="100">车牌号</th>
                <th width="100">车主姓名</th>
                <th width="150">违章原因</th>
                <th width="180">违章时间</th>
                <th width="180">处罚方式</th>
                <th width="100">是否受理</th>
                <th width="120">操作</th>
            </tr>
            {% for record in res %}
                <tr>
                    <td>{{ record.car.carno }}</td>
                    <td>{{ record.car.owner }}</td>
                    <td>{{ record.reason }}</td>
                    <td>{{ record.makedate }}</td>
                    <td>{{ record.punish }}</td>
                    <td>{{ record.dealt | yesno:'已受理,未受理' }}</td>
                    <td>
                        {% if not record.dealt %}
                            <button disabled>受理</button>
                        {% else %}
                            <button id="has_but">受理</button>
                        {% endif %}
                        <button id="has_but">删除</button>
                    </td>
                </tr>

            {% endfor %}
        </table>
        <div>
            <div class="buttons">
                <button id="has_but" data="/two/search/">首页</button>
                {% if res.has_previous %}
                    <button><a href="/two/search/?page={{ res.previous_page_number }}">上一页</a></button>&nbsp;
                {% else %}
                    <button disabled>上一页</button>
                {% endif %}
                第{{ res.number }} 页/共{{ res.paginator.num_pages }} 页&nbsp;&nbsp;
                {% if res.has_next %}
                    <button data="/two/search/?page={{ res.next_page_number }}">下一页</button>
                {% else %}
                    <button disabled>下一页</button>&nbsp;&nbsp;
                {% endif %}
                <button data="/two/search/?page={{ res.paginator.num_pages }}">末页</button>
            </div>

        </div>
    {% else %}
        {{ msg }}
    {% endif %}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    function loadPageData(evt) {
        $('#search').attr(
            'action', $(evt.target).attr('data')
        ).trigger('submit')
    }

    $(() => {
        $('.buttons>button').on('click', loadPageData)
    })
</script>
</body>
</html>